<template>
  <div class="app-container">
    <!-- 数据表 -->
    <div class="w-[100%] overflow-auto">
      <div class="min-w-screen-md">
        <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
          <!-- 菜单名称 -->
          <template #nameDefault="e">
            <div class="flex-x-start">
              <div class="mr-2">
                <RaIcon :icon="e.row.icon" />
              </div>
              <div class="mr-2">
                {{ $t(e.row.key, e.row.name) }}
              </div>
            </div>
          </template>
        </vxe-grid>
      </div>
    </div>

    <!-- 额外组件 -->
    <AddModule
      ref="addRef"
      :api="API"
      mode="add"
      :options="selectOption"
      @reload="gridRef?.commitProxy('query')"
    />

    <UpdateModule
      ref="updateRef"
      :api="API"
      mode="update"
      :options="selectOption"
      @reload="gridRef?.commitProxy('query')"
    />

    <DetailModule ref="detailRef" :api="API" :options="selectOption" />
  </div>
</template>

<script setup>
import API from '@/api/admin/dev/menu';
import FieldAPI from '@/api/admin/dev/field';
import { useTable } from './useTable';

import AddModule from './update/index.vue';
import UpdateModule from './update/index.vue';
import DetailModule from './detail.vue';

// 自定义配置
const customConfig = {
  // 可以在这里添加自定义配置覆盖默认配置
  // checkboxConfig: {
  //   trigger: 'row',
  // },
  // pagerConfig: {
  //   pageSize: 20,
  // },
  rowId: 'id',
  radioConfig: {
    trigger: 'row',
    reserve: true,
  },
  treeConfig: {
    trigger: 'row', // 触发方式
    rowField: 'id', // 行字段
    keyField: 'id', // key字段
    parentField: 'pid', // 父级字段
    transform: true, // 自动将列表转为树结构
    reserve: true, // 是否保留展开状态
    expandAll: true, // 默认展开所有子孙树节点
    accordion: false, // 对于同一级的节点，每次只能展开一个
  },
  rowDragConfig: {
    isCrossDrag: true,
    isToChildDrag: true,
  },
};

// 表格引用、配置、及初始化函数
const tableId = 'DevMenu';
const {
  // 组件引用
  gridRef,
  addRef,
  updateRef,
  detailRef,
  // SQL选项
  selectOption,
  // 数据表配置
  gridOptions,
  gridEvents,
} = useTable({ API, FieldAPI, tableId, customConfig });

// 组件选项
defineOptions({
  name: tableId,
  inheritAttrs: false,
});
</script>
